<template>
  <div class="login_box">
    <el-image class="bg_pic" src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" fit="cover"></el-image>
    <div class="login_forget_form">
      <div class="login_conent" v-show="isLoginShow">
        <h1 class="title">Hi！欢迎登录</h1>
        <h3 class="sub_title">澜山樾智慧小区服务平台</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="login_form">
          <el-form-item label="" label-width="0" prop="tel">
            <el-input class="lang_input" placeholder="请输入账号" prefix-icon="el-icon-user" clearable v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="password">
            <el-input class="lang_input" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="verifyCode" class="verify_code_box">
            <el-input class="sort_input" placeholder="请输入验证码" prefix-icon="el-icon-money" clearable v-model="ruleForm.verifyCode"></el-input>
            <el-image class="verify_code_img" src="" fit="cover"></el-image>
          </el-form-item>
          <div class="remember_pass">
            <el-checkbox v-model="isRememberPass">记住密码</el-checkbox>
          </div>
          <el-button type="primary" round @click="submitLogin('ruleForm')" class="lang_button">立即登录</el-button>
          <div @click="goToFrogetPass" class="forget_button">忘记密码？</div>
        </el-form>
      </div>
      <div class="login_conent forget_pass_conent" v-show="isForgetShow">
        <h1 class="title">忘记密码？</h1>
        <h3 class="sub_title">澜山樾智慧小区服务平台</h3>
        <el-form :model="fgRuleForm" :rules="rules" ref="fgRuleForm" label-width="0" class="login_form">
          <el-form-item label="" label-width="0" prop="tel">
            <el-input class="lang_input" placeholder="请输入手机号" prefix-icon="el-icon-user" clearable v-model="fgRuleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="verifyCode" class="verify_code_box">
            <el-input class="sort_input sort_input_fg" placeholder="请输入验证码" prefix-icon="el-icon-money" clearable v-model="fgRuleForm.verifyCode"></el-input>
            <el-button type="primary" round @click="getCode" :disabled="isCodeDisabled" class="sort_button">{{ codeText }}</el-button>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="password">
            <el-input class="lang_input" placeholder="请输入新密码" prefix-icon="el-icon-lock" show-password v-model="fgRuleForm.password"></el-input>
          </el-form-item>
          <el-button type="primary" round @click="submitForget('fgRuleForm')" class="lang_button">确认修改</el-button>
          <div @click="goToLogin" class="forget_button">我要登录</div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from '@/lib/util'

export default {
  name: 'login',
  data () {
    return {
      isLoginShow: true,
      isForgetShow: false,
      isRememberPass: false,
      isCodeDisabled: false,
      codeText: "获取验证码",
      codeTimeNum: 60,
      ruleForm: {
        tel: '',
        password: '',
        verifyCode: ''
      },
      rules: {
        tel: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度在 4 个字符', trigger: 'blur' }
        ]
      },
      fgRuleForm: {
        tel: '',
        password: '',
        verifyCode: ''
      }
    }
  },
  methods: {
    // 登录
    submitLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: '登录成功',
            type: 'success',
            duration: 1500
          });
          setToken('token123');
          this.$router.push({ path: '/home' });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 忘记密码
    submitForget(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取验证码
    getCode() {
      let _this = this;
      const phoneReg = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
      if (phoneReg.test(this.fgRuleForm.tel)) {
        console.log("123");
        this.isCodeDisabled = true;
        let remain = 60;
        this.codeText = "60s后重新获取";
        let time = setInterval(function() {
          if (remain == 1) {
            clearInterval(time);
            _this.codeTimeNum = 60;
            _this.codeText = "获取验证码";
            _this.isCodeDisabled = false;
            return false;
          }
          remain--;
          _this.codeTimeNum = remain;
          _this.codeText = `${_this.codeTimeNum}s后重新获取`;
        }, 1000);
      } else {
        this.$message({
          message: '请输入正确的手机号码',
          type: 'warning'
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 跳转忘记密码
    goToFrogetPass() {
      this.isLoginShow = false;
      this.isForgetShow = true;
      this.resetForm("ruleForm");
    },
    // 跳转登录
    goToLogin() {
      if (this.isCodeDisabled) {
        this.$message({
          message: '验证码发送中',
          type: 'warning'
        });
      } else {
        this.isLoginShow = true;
        this.isForgetShow = false;
        this.resetForm("fgRuleForm");
      }
    }
  }
}
</script>

<style lang="less">
@import "./login.less";
</style>

